<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { storeToRefs } from 'pinia'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { formatDate } from '@/utils/date'
import calendarOld from "./lunarDay";
import { weatherStore } from '@/store/modules/calendarConfig'
import { Setting } from '@element-plus/icons-vue'
import { MeunItem } from '../interfaceType'
import { pageStore } from '@/store/modules/pageConfig'
import contextMenu from '@/components/RightMenu/index'
import { RightMenuItem, ContextMenuOptions } from '@/components/RightMenu/interfaceType'

const comAction = {
  // 是否节假日
  isFestival(slotData) {
    // console.log(slotData);
    let solarDayArr = slotData.day.split('-');
    let lunarDay: any = calendarOld.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

    // 公历节日\农历节日\农历节气
    let festAndTerm: any = [];
    festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
    festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
    festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
    festAndTerm = festAndTerm.join('')

    return festAndTerm != ''
  },
  // 公历转农历
  solarToLunar(slotData: any, type = true) {
    // console.log(slotData);
    let solarDayArr = slotData.day.split('-');
    let lunarDay: any = calendarOld.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

    // 农历日期
    let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
    if (type) {
      if (type && lunarDay.IDayCn == '初一') {
        lunarMD = lunarDay.IMonthCn;
      } else {
        lunarMD = lunarDay.IDayCn;
      }
    }

    // 公历节日\农历节日\农历节气
    let festAndTerm = '';
    festAndTerm += (lunarDay.festival == null ? '' : lunarDay.festival + '<br />')
    festAndTerm += (lunarDay.lunarFestival == null ? '' : lunarDay.lunarFestival + '<br />')
    festAndTerm += (lunarDay.Term == null ? '' : lunarDay.Term + '<br />')
    return festAndTerm == '' ? lunarMD : festAndTerm;
  }

}

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const weatherData = ref({})

let configStore = storeToRefs(weatherStore())
let { weatherDataList, newDay } = configStore

nextTick(() => {
  let newDay1 = formatDate(new Date(), 'yyyy-MM-dd');
  if (newDay1 == newDay.value) return
  newDay.value = newDay1
  ajaxRequest.get({
    url: "https://api.vvhan.com/api/weather?city=南宁&type=week",
    submitAgainValidation: true,
    // submitAgainTipFlag: true,
    submitAgainTime: 3000
  }).then((res: any) => {
    // debugger
    if (typeof res == 'string') {
      res = JSON.parse(res)
    }
    if (res.success) {
      weatherDataList.value = {}
      weatherData.value = res
      for (let i = 0; i < res.data.length; i++) {
        let data = res.data[i]
        let key = data.date
        weatherDataList.value[key] = data
        weatherDataList.value[key].temperature = data.low + "~" + data.high
      }
    }
  })
})

const props = defineProps({
  config: { type: Object as () => MeunItem, required: true },
  keys: { type: String, default: '' },
  path: { type: String, default: '' },
})

const items: RightMenuItem[] = [
  {
    label: `删除日历`,
    svg: Setting,
    onClick: () => {
      pageStore().updateHomeListByPath(props.path, 'delete')
    }
  }
]
const options: ContextMenuOptions = {
  items
}

function openMenu(e: MouseEvent) {
  contextMenu(e, options)
}
</script>

<template>
  <div class="calendar-box" @contextmenu.prevent="openMenu">
    <!-- {{ config?.id }} -->
    <el-calendar ref="calendar">
      <template #header="{ date }">
        <!-- <span>今天的心情是？</span> -->
        <span style="display: flex;align-items: center;padding-left: 20px;font-weight: bolder;">{{ date }}</span>
        <el-button-group>
          <el-button text size="small" @click="selectDate('prev-month')">
            < </el-button>
              <el-button text size="small" @click="selectDate('today')">今天</el-button>
              <el-button text size="small" @click="selectDate('next-month')"> > </el-button>
        </el-button-group>
      </template>
      <template #date-cell="{ data }">
        <div v-if="weatherDataList[data.day] == undefined" style="height: auto;">
          <p style="margin: auto;">
            {{ data.day.split('-').slice(2).join('-') }}
          <div class="lunar-box" :class="comAction.isFestival(data) ? 'festival-holiday' : ''"><span
              v-html="comAction.solarToLunar(data)"></span></div>
          </p>
        </div>
        <el-tooltip v-else placement="top" :show-after="500" width="auto" effect="light" 
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 10px 20px;">
          <!-- :visible="true" -->
          <!-- <template #reference> -->
          <p>
            {{ data.day.split('-').slice(2).join('-') }}
          <div class="lunar-box" :class="comAction.isFestival(data) ? 'festival-holiday' : ''"><span
              v-html="comAction.solarToLunar(data)"></span></div>
          </p>
          <template #content>
            <div style="width:120px !important;">
                <div class="lunar-box2" :class="comAction.isFestival(data) ? 'festival-holiday' : ''">
                  <span v-html="comAction.solarToLunar(data, false)"></span>
                </div>
              <div class="popover-box">
                <div>{{ weatherDataList[data.day]?.type }}</div>
                <div>{{weatherDataList[data.day]?.temperature }}</div>
              </div>
              <div class="popover-box">
                <div>{{ weatherDataList[data.day]?.fengxiang }}</div>
                <div>{{weatherDataList[data.day]?.fengli }}</div>
              </div>
              
              
            </div>
          </template>
        </el-tooltip>
      </template>
    </el-calendar>
  </div>
</template>

<style scoped lang="scss">
.calendar-box {
  /* pointer-events: none; */
}

::v-deep(.el-calendar) {
  background-color: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: auto;
  font-size: 12px;
  /* height: 100%; */
  border-radius: 10px;
  /* border-top: 1px solid; */
  --el-calendar-border: var(--el-table-border, 1px solid var(--el-border-color-lighter));
  --el-calendar-header-border-bottom: var(--el-calendar-border);
  --el-calendar-selected-bg-color: var(--el-color-primary-light-9);
  --el-calendar-cell-width: 85px;
  /* background-color: var(--el-fill-color-blank); */

  .el-calendar__header {
    padding: 2px !important;

    .el-button-group {
      .el-button.is-text {
        color: white;
      }

      .el-button.is-text:not(.is-disabled):hover {
        font-weight: bolder;
        background-color: unset;
      }
    }
  }

  .el-calendar__body {
    padding: auto !important;
  }
}

.date-class {
  font-size: 12px;
  text-align: center;
  margin-top: 1px;
  font-family: DS-DIGI-1;
}

::v-deep(.el-calendar-table) {
  text-align: center;

  & thead th {
    color: white;
    font-weight: bolder;
  }

  & .el-calendar-day {
    padding: 2px;
    height: auto;
  }

  & .el-calendar-day:hover {
    background-color: rgb(255 255 255 / 39%);
  }

  .el-divider {
    margin: 3px 0;
    border-top: 1px#3763c9 var(--el-border-style);
  }

}

.festival-holiday {
  color: #b51313;
}

.popover-box {
  display: flex;
  justify-content: space-between;
  line-height: 2em;
  border-bottom: 1px solid var(--el-border-color-lighter);
}


:deep(.el-calendar__header) {
  padding: 5px 20px;
  padding-bottom: 0;
  border-bottom: unset;
}

:deep(.el-calendar__body) {
  padding: 5px 5px 5px;

  .is-today .el-tooltip__trigger {
    border-radius: 5px;
    background: #d9ecff;
    font-weight: bolder;
  }
}

:deep(p.el-tooltip__trigger) {
  margin: auto;
}

.lunar-box {
  font-size: 10px;
}
.lunar-box2 {
  text-align: center;
  font-weight: bolder;
  font-size: 14px;
}

:deep(.el-calendar-table thead th) {
  padding: 0;
}

:deep(.el-calendar-table td) {
  /* border-bottom: unset;
  border-right: unset; */
  transition: background-color var(--el-transition-duration-fast) ease;
  vertical-align: top;

  &.is-selected {
    background-color: unset;
  }
}

.el-calendar-table:not(.is-range) td.next .festival-holiday {
  color: #f89898;
}
</style>